{include file="header" title="$title" /}
    <div class="page-title i-card-main">
        <i class="iconfont icon-page"></i>
        <span>NOTIFY LIST</span>
        <div class="add" data-toggle='modal' data-target='#notifymodal'>
            <span><i class="iconfont icon-add"> 添加公告</i></span>
        </div>
    </div>
    <div class="modal fade" id="notifymodal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加公告</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="hintData">
                <div class="form-group">
                    <input name="notifyname" type="text" placeholder="请输入公告名">
                    <input name="notifyid" type="text" style="display: none;">
                    <i class="iconfont icon-post"></i>
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="content" rows="4" placeholder="请输入公告内容"></textarea>
                    <p class="font-weight-lighter">备注：提交后需要手动推送给所有在线用户</p>
                </div>
            </div>
            <div class="modal-footer" id="notifyBut">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="update" class="btn btn-primary">确认</button>
            </div>
            </div>
        </div>
    </div>
    <div class="i-card-main">
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th style="display: none;">内容</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <nav id="page" style="display: none;">
            <ul class="pagination justify-content-center">
            </ul>
        </nav>
    </div>  
    {include file="footer" /}
</div>
<script>
$(".loading").show();
$(".i-card-main").eq(1).hide();

$('.add').click(function(){
    $('#userModal .modal-title').text('添加公告')
})
$('#userModal .modal-title').text('修改公告')

$(document).ready(function(){
    $.get("/api/v1/getnotifyList?page=" + page,function(res){
        if (res.code !== 200) {
            layer.msg(res.data.msg);
            return;
        }

        const data = res.data.data;
        let html = "";
        for (let i = 0; i < data.length; i++) {
            const { id, title, content, time } = data[i];
            html += `<tr>
                    <th scope="row">${id}</th>
                    <td>${title}</td>
                    <td style="display: none;">${content}</td>
                    <td style="width: 174px;">${timestampToTime(time)}</td>
                    <td>
                        <span class="badge badge-info" id="${id}">推送</span>
                        <span class="badge badge-primary" data-toggle="modal" data-target="#notifymodal" id="${id}">修改</span>
                        <span class="badge badge-danger" id="${id}">删除</span>
                    </td>
                    </tr>`;
        }
        pages(res)
        $("tbody").html(html);
        $(".loading").hide();
        $(".i-card-main").eq(1).show();

    });
});

$("tbody").on("click", "span", function() {
    const id = $(this).attr("id");
    const name = $(this).parent().siblings(":nth-child(2)").text();
    const content = $(this).parent().siblings(":nth-child(3)").text();
    if ($(this).hasClass("badge-primary")) {
        $("#notifymodal .modal-body input[name='notifyname']").val(name);
        $("#notifymodal .modal-body input[name='notifyid']").val(id);
        $('#notifymodal .modal-body #content').val(content);
    } else if ($(this).hasClass("badge-info")) {
        layer.alert("确定要推送给所有在线用户吗？", {
        icon: 0,
        btn: ["确定", "取消"],
        yes: function(index) {
            layer.close(index);
            $.post("/api/v1/push", { "title": name, "msg": content }, function(res) {
            if (res.code === 200) {
                layer.msg("推送成功");
            } else {
                layer.msg(res.msg);
            }
            });
        },
        });
    } else {
        layer.alert("确定要删除此公告吗？", {
        icon: 5,
        btn: ["确定", "取消"],
        yes: function(index) {
            layer.close(index);
            $.post("/api/v1/deleteNotify", { "id": id }, function(res) {
                if(res.code == 200){
                    layer.msg(res.msg);
                    setTimeout(function(){
                        window.location.reload();
                    },500);
                }else{
                    layer.msg(res.msg);
                }
            });
        }
    });}
});

$('#notifyBut #update').click(function(){
    const name = $('#notifymodal .modal-body input[name="notifyname"]').val();
    const id = $('#notifymodal .modal-body input[name="notifyid"]').val();
    const content = $('#notifymodal .modal-body textarea').val();
    $.post("/api/v1/editNotify",{"id":id,"title":name,"content":content},function(res){
        if(res.code == 200){
            layer.msg(res.msg);
            setTimeout(function(){
                window.location.reload();
            },500);
        }else{
            layer.msg(res.msg);
        }
    });
});
</script>
 </body></html>